<template>
  <div class="message">
    <van-notice-bar
      text="我们失去了彼此！从此陌路.Finally, we lost each other! From this way."
      left-icon="../../static/images/icon_55-22.png"
    />


    <van-cell-swipe :right-width="65" v-for="n in 20" :on-close="onClose">
      <van-cell-group>
        <van-cell>
          <p>阿达大方的范德萨发是否s</p>
        </van-cell>
      </van-cell-group>
      <span slot="right">删除</span>
    </van-cell-swipe>
    <p>合并分支</p>


    <div>

    </div>


    <div>

    </div>

    <div>cherry-pick命令</div>
  </div>
</template>
<script type="text/ecmascript-6">
  import Vue from 'vue'
  import { NoticeBar } from 'vant';
  import { CellSwipe } from 'vant';
  import { Dialog } from 'vant';
  Vue.use(CellSwipe);
  Vue.use(NoticeBar);
  export default{
    data(){
      return {
        disabled: false,
        message:'',
      }
    },
    methods: {
      onClose(clickPosition, instance) {
        switch (clickPosition) {
          case 'left':
          case 'cell':
          case 'outside':
            instance.close();
            break;
          case 'right':
            Dialog.confirm({
              message: '确定删除吗？'
            }).then(() => {
              instance.close();
            });
            break;
        }
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .message {
    background-color: #fff;
    color red
    font-size .3rem
    .van-cell-swipe__right {
      width 65px
      top -5px
      span {
        font-size .53rem
        color #fff
      }
    }
    .van-cell__value {
      p {
        padding 0
        margin 0
      }
    }
  }
</style>
